<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<i lvColorState lv-icon="lv-icon-search" [ngClass]="{ active: !!nameFilterTrueValue || nameSearchPanelVisible }"
    #nameFilter="lvPopover" lv-popover [lvPopoverContent]="nameFilterTpl" lvPopoverTheme="light"
    lvPopoverPosition="bottomRight" lvPopoverShowArrow="false" lvPopoverTrigger="customize"
    [lvPopoverBeforeOpen]="popoverBeforeOpen" [(lvPopoverVisible)]="nameSearchPanelVisible"
    (click)="openNameSearchPanel()"></i>

<ng-template #nameFilterTpl>
    <span class="name-filter-title" *ngIf="filterTitle" lv-overflow>{{filterTitle}}</span>
    <input #nameFilterInput lv-input [(ngModel)]="nameFilterValue" class="name-filter-input" (keydown.enter)="confirmName($event)" />
    <div class="name-filter-operation">
        <button lv-button (click)="reset()">
            {{'common_reset_label' | i18n}}
        </button>
        <button #primaryButton lv-button lvType="primary" (click)="filterByName(nameFilterValue)">
            {{'common_search_label' | i18n}}
        </button>
    </div>
</ng-template>